<template>
	<view class="search-result-page">
		<view
			class="w"
			style="width: 100%; height: 30px"
		></view>
		<view class="search-result-nav">
			<view
				class="back"
				@click="back"
			>
				<i class="certishare-icon">
					<span>&#xe602;</span>
				</i>
			</view>
			<view class="serch-result-serchblock">
				<u-search
					placeholder="说出你想搜的东西"
					v-model="keyword"
					:clearabled="true"
					@search="searchData"
				></u-search>
			</view>
		</view>
		<view class="search-result">
			<view class="search-result-swiper-nav">
				<!-- 导航栏 -->
				<view
					class="nav-item active"
					@click="changeTab('all')"
				>
					全部
				</view>
				<view class="slider"></view>
			</view>
			<!-- 展示 -->
			<swiper
				:indicator-dots="false"
				:autoplay="false"
				:duration="100"
				:current="current"
				@change="changeSwiper"
				class="swiper"
				:style="{ height: swiperHeight + 'px' }"
				v-show="!isLoading"
			>
				<swiper-item
					v-for="(data, index) in localCardList"
					:key="index"
				>
					<scroll-view
						scroll-y="true"
						:class="{ 'scroll-view': true, 'scroll-view-active': showScrollViewActive }"
						:lower-threshold="50"
						:refresher-enabled="false"
					>
						<view class="scroll-view-item">
							<CardVue
								v-for="(card, index) in localCardList"
								:key="index"
								:cardData="card"
							></CardVue>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 加载页面 -->
		<view
			class="loaders"
			v-show="isLoading"
		>
			<loaderVue></loaderVue>
			<view class="loading-text">
				<span>数据正在赶来的路上,稍安勿躁,稍安勿躁.....</span>
			</view>
		</view>
		<view
			class="noData"
			v-if="isNone"
			style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
		>
			<span style="font-size: 18px; color: #999">没有数据呐~</span>
		</view>
	</view>
</template>

<script>
import CardVue from '../../components/index/index_card/Card.vue';
import loaderVue from '../../components/loader/loader.vue';
import { search } from '@/common/api/search.js';
import { getSearchHot } from '@/common/api/search.js';
export default {
	data() {
		return {
			keyword: '',
			currentIndex: 0,
			current: 0,
			swiperHeight: 800,
			showScrollViewActive: false,
			isLoadingMore: false,
			isLoading: false,
			localCardList: [],
			isNone: true
		};
	},
	components: {
		CardVue,
		loaderVue
	},
	methods: {
		changeTab(tab) {
			this.activeTab = tab;
			if (tab === 'all') {
				this.sliderPosition = 0;
			} else if (tab === 'tag') {
				this.sliderPosition = '50%';
			}
		},
		setSearchValue(val) {
			this.keyword = val;
		},
		changeSwiper(e) {
			console.log(e);
		},
		async getSeachList(val) {
			const that = this;
			await search(val).then((res) => {
				if (res.length === 0) {
					this.localCardList = [];
					this.isNone = true;
				} else {
					that.localCardList = res;
					this.isNone = false;
				}
			});
			console.log(this.localCardList);
		},
		back() {
			uni.navigateBack();
		},
		searchData() {
			const key = this.keyword;
			this.getSeachList(key);
		}
	},
	onLoad(option) {
		this.setSearchValue(option.search);
		this.getSeachList(option.search);
	}
};
</script>

<style lang="scss" scoped>
.search-result-page {
	width: 750rpx;
	height: 100vh;
	position: relative;
	.search-result-nav {
		// margin-top: 40px;
		width: 100%;
		height: 44px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.back {
			margin-left: 20rpx;
			.certishare-icon {
				font-size: 28px;
				font-weight: 700;
			}
		}
		.serch-result-serchblock {
			width: 85%;
		}
	}
	.search-result {
		width: 100%;
		.search-result-swiper-nav {
			width: 100%;
			height: 50px;
			// background-color: red;
			border-bottom: 1px solid #eee;
			position: relative;
			.nav-item {
				width: 50px;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 20px;
				transition: 0.3s;
				// background-color: rebeccapurple;
				font-family: 'Source Han Sans SC Bold';
				&.active {
					scale: 1;
				}
			}
			.slider {
				width: 50px;
				height: 5px;
				background-color: blue;
				border-radius: 50px;
				position: absolute;
				top: 95%;
				left: 5%;
			}
		}

		.swiper {
			width: 100%;
			display: flex;
			// justify-content: center;
			align-items: center;
		}
		.scroll-view-active {
			height: 800px;
		}
		.scroll-view {
			width: 100%;
			display: flex;
			justify-content: space-between;
			.scroll-view-item {
				padding-left: 14rpx;
				width: 96%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.loadMore {
					width: 120%;
					height: 150rpx;
					background-color: red;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #eee;
				}
			}
		}
	}
	.loaders {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 0%;
		.loading-text {
			margin-top: 60rpx;
			span {
				font-size: 12px;
				font-family: 'Source Han Sans SC Normal';
			}
		}
	}
}
</style>
